<template>
    <view class="content">
		<view>
			<u-swiper
			    :list="list2"
			    keyName="imageUrl"
			    showTitle
			    :autoplay="false"
			    circular
				height='200px'
			    ></u-swiper>
		</view>
		<view class="myCard" v-if="showMy">
			<view v-if="userInfo">
				<u-row >
				    <u-col span="2">
				        <view></view>
				    </u-col>
				    <u-col span="2">
						<view>
							<image :src="userInfo.avatarUrl" class="userHead"></image>
						</view>
				    </u-col>
					<u-col span="4">
					<!-- <view class="demo-layout bg-purple-light">姓名</view> -->
					<view>
						{{userInfo.nickMame}}
					</view>
					<view class="lineTwo col">第{{userInfo.rank}}名</view>
					</u-col>
					<u-col span="4">
						<view class="lines col">{{userInfo.totalTime}}</view>
						<view class="lines lineTwo col">
							<view  class="thumb">
								<view class="num">
									{{userInfo.otherLike}}
								</view>
								<view class="icon" @click="thumbUp()">
									<u-icon :name="thumbUpName"  :color="thumbColor"  size="20"></u-icon>
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-else class="my">
				暂无排名
			</view>
		</view>
		<list  @scrolltolower="reqtest" v-for="(item,index) in rankList" :key="index">
			<list-item>
				<view  class="allCard">
				<u-row >
				    <u-col span="2">
				        <view :class="[item.rank < 4 ? 'top':'','ranking']">{{item.rank}}</view>
				    </u-col>
				    <u-col span="2">
						<view v-if="item.avatarUrl != null">
							<image :src="item.avatarUrl" class="userHead"></image>
						</view>
						<view v-else>
								<!-- <image :src="123" class="userHead"></image> -->
						</view>
				    </u-col>
					<u-col span="4">
					<view>
						{{item.nickMame}}
					</view>
					</u-col>
					<u-col span="4">
						<view class="lines col">{{item.totalTime}}</view>
						<view class="lines lineTwo col">
						<view  class="thumb">
							<view class="num">
								{{item.otherLike}}
							</view>
							<view v-if="item.tag == 1" class="icon" @click="thumbUp(false,item.username,item)">
								<u-icon name="thumb-up-fill"  color="#2979ff"  size="20"></u-icon>
							</view>
							<view v-else class="icon" @click="thumbUp(true,item.username,item)">
								<u-icon name="thumb-up"   size="20"></u-icon>
							</view>
						</view>
						</view>
					</u-col>
				</u-row>
				</view>
			</list-item>
		</list>
    </view>
</template>
<script>
export default{
    data(){
		return{
			// num:0,
			thumbUpName:'thumb-up',
			thumbColor:'',
			list2:[],
			// [{
			// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
			//     },{
			//     image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
			//     },{
			//     image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			//     }],
			userInfo:"",
			// {
			// 	name:'不如归去',
			// 	ranking:'15',
			// 	time:'3小时15分钟',
			// 	num:3,
			// },
			rankList:[
				// {
				// 	rank:1,
				// 	avatarUrl:'https://thirdwx.qlogo.cn/mmopen/vi_32/9Aghz97mkORncyiahnrGzDR2bed0DmxZT0HiayibQCpnq8VakrG8sn1fKeDEibc7icdSEZmJXvGOlacibvXyicfCwRJCQ/132',
				// 	nickMame:'不如归去1',
				// 	totalTime:4800,
				// 	otherLike:1,
				// 	username:1,
				// },
				// {
				// 	rank:2,
				// 	avatarUrl:'https://thirdwx.qlogo.cn/mmopen/vi_32/9Aghz97mkORncyiahnrGzDR2bed0DmxZT0HiayibQCpnq8VakrG8sn1fKeDEibc7icdSEZmJXvGOlacibvXyicfCwRJCQ/132',
				// 	nickMame:'不如归去2',
				// 	totalTime:4800,
				// 	otherLike:1,
				// 	username:2,
				// },
				// {
				// 	rank:3,
				// 	avatarUrl:'https://thirdwx.qlogo.cn/mmopen/vi_32/9Aghz97mkORncyiahnrGzDR2bed0DmxZT0HiayibQCpnq8VakrG8sn1fKeDEibc7icdSEZmJXvGOlacibvXyicfCwRJCQ/132',
				// 	nickMame:'不如归去3',
				// 	totalTime:4800,
				// 	otherLike:1,
				// 	username:3,
				// },
				// {
				// 	rank:4,
				// 	avatarUrl:'https://thirdwx.qlogo.cn/mmopen/vi_32/9Aghz97mkORncyiahnrGzDR2bed0DmxZT0HiayibQCpnq8VakrG8sn1fKeDEibc7icdSEZmJXvGOlacibvXyicfCwRJCQ/132',
				// 	nickMame:'不如归去4',
				// 	totalTime:4800,
				// 	otherLike:1,
				// 	username:4,
				// }
			],
			myRank:[],
			showMy:false,
			rankMy:false,
			isthumbs:0, //0为未点赞图标；1为已经点赞的图标
			token:'',
			pageSize:10,
			pageNum:1,
			taotal: 0,
		}
    },
    onLoad() {
		this.requestImarg()
		this.getRanking()
	},
	onShow(){
    			// this.getRanking();
		this.token = uni.getStorageSync('token')
		console.log("保存的token",this.token)
		if(this.token != null){
			this.showMy = true;
			// this.getMyRanking()
		}
		console.log("aaaaaa");
		// if(uni.getStorageSync("listdata")){
		// 	let listdata = uni.getStorageSync("listdata")
		// 	    this.rankList = listdata.rankList

		// }else{
    	// 		this.getRanking();
		// }
		// this.getRanking();
	},
	onPullDownRefresh(){
		this.pageSize = 5,
		this.pageNum = 1
		this.rankList = []
		this.getRanking();
	},	 
	methods: {
			async requestImarg(){
				uni.request({
			    // url: 'http://192.168.31.18:8889/app/home/page-images', 
			    url: 'http://139.9.151.197:8889/app/home/page-images', 
				method:"GET",
			    data: {
			    },
			    header: {
					Accept: "*/*"
			    },
			    success: (res) => {
					console.log(res);
					this.list2 = res.data.data
					
			    },
			});
			},
		// 点赞
		thumbUp(item,name,items){
			console.log("返回的item",item,name,items	);
			let tag
			if(item){
				console.log("返回的item",name,);
				items.tag =1;
				items.otherLike++;
				// this.$cache.set(name,true)
			}else{
				items.tag = 0;
				items.otherLike--;
				if(items.otherLike<0) items.otherLike = 0
				// this.$cache.set(name,false)
			}
			let urlparams = `?username=${name}&tag=${items.tag}`
			this.$myRequest({
					url:'/app/home/user_week_like'+urlparams,
					method:'get',
					data:{
						// username:item.userName,
						// tag:item.tag,
					}
				}).then(res=>{
						console.log("返回参数",res);
						console.log("点赞成功")
					}
					).catch(err =>{
						console.log(err)
					})			
		},
		//获取排行榜
	    getRanking(){
			let username = this.$cache.get("UserName")
			let num = `?pageSize=${this.pageSize}&pageNum=${this.pageNum++}&username=${username}`
			this.$myRequest({
				url:'/app/home/rank'+num
			}).then(res=>{
				// 给我的排行耪赋值
				console.log("rankres",res.data.data.weekRank);
				console.log("rankres",res.data.data.weekRank.total);
				this.userInfo = res.data.data.myRank;
				if(this.userInfo == "暂无排名"){
					this.userInfo = false;
				}else{
					this.userInfo = res.data.data.myRank;
				}
				// 给总排行榜复制
				// this.rankList = res.data.data.weekRank.data;
				// console.log("用户列表",this.rankList);
				// this.taotal = res.data.total
				this.taotal = res.data.data.weekRank.total
				if(this.total >= this.pageSize*this.pageNum){
					this.rankList = this.rankList.concat(res.data.data.weekRank.data);
				}else{
					this.rankList = this.rankList.concat(res.data.data.weekRank.data);
					uni.showToast({
					    icon: "none",
					    title: "已经到最后了，暂无更多数据!",
					    duration: 3000
					})
				}
				console.log("用户",this.rankList);
				this.rankList = this.rankList.map(item =>{
					if(item.totalTime == 0){
						item.totalTime = item.totalTime+"分钟";
					}else if(item.totalTime < 60){
						item.totalTime = item.totalTime+"秒";
					}else if(item.totalTime < 3600){
						let m = parseInt(item.totalTime/60);
						let s = item.totalTime%60
						item.totalTime = m+"分钟"+s+"秒";
					}else{
						let h = parseInt(item.totalTime/3600);
						let remainder = item.totalTime%3600;
						let m = parseInt(remainder/60);
						if(remainder == 0){
							let s = remainder%60;
							item.totalTime = h+"小时"+m+"分钟"+s+"秒";
						}else{
							item.totalTime = h+"小时"+m+"分钟";
						}
						
					}
			       // 本地点赞
				    if(this.$cache.get(item.username)){
						item.tag = 1
					}else{
						item.tag = 0
					}
					return item
				}) 
				// 增加tag字段,判断用户的点赞状态
				// this.rankList.forEach((item,index)=>{
				// 	this.$set(this.rankList[index],'tag',0)
				let item = this.userInfo
				if(item.totalTime == 0){
						item.totalTime = item.totalTime+"分钟";
					}else if(item.totalTime < 60){
						item.totalTime = item.totalTime+"秒";
					}else if(item.totalTime < 3600){
						let m = parseInt(item.totalTime/60);
						let s = item.totalTime%60
						item.totalTime = m+"分钟"+s+"秒";
					}else{
						let h = parseInt(item.totalTime/3600);
						let remainder = item.totalTime%3600;
						let m = parseInt(remainder/60);
						if(remainder == 0){
							let s = remainder%60;
							item.totalTime = h+"小时"+m+"分钟"+s+"秒";
						}else{
							item.totalTime = h+"小时"+m+"分钟";
						}
					}
				// })
				
				console.log("用户列表******",this.rankList)
			})
		}
		
	},
	onHide(){
			let listdata = {}
				listdata.rankList = this.rankList
				uni.setStorageSync("listdata",listdata)
	}
}
</script>
<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #eee;
		.myCard{
			border-radius: 5px;
			background-color: #fff;
			width: 95%;
			height: 60px;
			margin: 10px auto;
			// padding: 5px 5%;
			font-size: 12px;
			// 暂无排名时的样式
			.my{
				line-height: 60px;
				text-align: center;
			}
			.userHead{
				width: 50px;
				height: 50px;
				border-radius: 25px;
				margin-top: 5px;
			}
			.lines{
				// float: right;
				margin-right: 10px;
				text-align: right;
			}
			.lineTwo{
				margin-top: 10px;
			}
			.col{
				color: #393939;
			}
			.thumb{
				overflow: hidden;
			}
			.num{
				float: right;
				margin-top: 3px;
			}
			.icon{
				float: right;
			}
		}
		.allCard{
			border-radius: 5px;
			background-color: #fff;
			width: 95%;
			height: 60px;
			margin: 10px auto;
			font-size: 12px;
			.ranking{
				font-size: 18px;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				color:white;
				font-size: weight;
			}
			.top{
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background-color: orange;
				margin: 0 auto;
				// text-align: center;
			}
			.userHead{
				width: 50px;
				height: 50px;
				border-radius: 25px;
				margin-top: 5px;
			}
			.lines{
				// float: right;
				margin-right: 10px;
				text-align: right;
				color: #576b95 s !important;
			}
			.lineTwo{
				margin-top: 10px;
			}
			.col{
				color: #393939;
			}
			.thumb{
				overflow: hidden;
			}
			.num{
				float: right;
				margin-top: 3px;
			}
			.icon{
				float: right;
			}
		}
	}
</style>
